<template>
	<div class="wrap">
		<p class="count">{{ counterStore.count }}</p>
		<el-button
			type="primary"
			size="small"
			@click="counterStore.increment"
			>count++</el-button
		>
		<el-button
			type="danger"
			size="small"
			@click="counterStore.subtraction"
			>count--</el-button
		>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCounterStore } from "@/store/index.js";
	const counterStore = useCounterStore();
</script>

<style lang="scss" scoped>
	.wrap {
		.count {
			color: red;
		}
	}
</style>
